<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/splash-icon.png">
<link rel="apple-touch-startup-image" href="images/splash-screen.png" 			media="screen and (max-device-width: 320px)" />  
<link rel="apple-touch-startup-image" href="images/splash-screen@2x.png" 		media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" /> 
<link rel="apple-touch-startup-image" sizes="640x1096" href="images/splash-screen@3x.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/splash/splash-screen-ipad-landscape" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/splash-screen-ipad-portrait.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)" />
<link rel="apple-touch-startup-image" sizes="1536x2008" href="images/splash-screen-ipad-portrait-retina.png"   media="(device-width: 768px)	and (orientation: portrait)	and (-webkit-device-pixel-ratio: 2)"/>
<link rel="apple-touch-startup-image" sizes="1496x2048" href="images/splash-screen-ipad-landscape-retina.png"   media="(device-width: 768px)	and (orientation: landscape)	and (-webkit-device-pixel-ratio: 2)"/>
<title>Epsilon Mobile Framework - Version 2.0</title>
<link href="css/style.css"     		 rel="stylesheet" type="text/css">
<link href="css/framework.css" 		 rel="stylesheet" type="text/css">
<link href="css/menu.css" 		 	 rel="stylesheet" type="text/css">
<link href="css/owl.theme.css" 		 rel="stylesheet" type="text/css">
<link href="css/swipebox.css"		 rel="stylesheet" type="text/css">
<link href="css/font-awesome.css"	 rel="stylesheet" type="text/css">
<link href="css/animate.css"			 rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryui.js"></script>
<script type="text/javascript" src="js/framework.plugins.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div id="preloader">
	<div id="status">
    	<p class="center-text">
			正在加载中...
            <em>尊敬的大人:小人正在努力奔跑中 还请稍等</em>
        </p>
    </div>
</div>
<div class="all-elements">
<div id="perspective" class="perspective effect-airbnb"><!--this houses the entire page, and creates the effect-->
    <div class="header">
        <a href="#" id="showMenu"><i class="fa fa-navicon"></i></a>
        <a href="#" id="pageLogo"><img src="images/z.png" alt="img"></a>
        <a href="#" id="openMail"><i class="fa fa-envelope-o"></i></a>
    </div> 	
    <div class="outer-nav">
        <div class="inner-nav">
            <div class="nav-item">
                <a href="index.html">
                    <i class="nav-icon fa fa-home"></i>
                    Home
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item active-item">
                    <i class="nav-icon fa fa-cog"></i>
                    Features
                </a>
                <div class="nav-sub-item nav-sub-active">
                    <a href="features-type.html">Type</a>
                    <a href="features-jquery.html">jQuery</a>
                    <a class="active-item" href="features-others.html">Others</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item">
                    <i class="nav-icon fa fa-camera"></i>
                    Gallery
                </a>
                <div class="nav-sub-item">
                    <a href="gallery-wide.html">Thumbs Wide</a>
                    <a href="gallery-round.html">Thumbs Round</a>
                    <a href="gallery-square.html">Thumbs Square</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item">
                    <i class="nav-icon fa fa-picture-o"></i>
                    Portfolio
                </a>
                <div class="nav-sub-item">
                    <a href="portfolio-adaptive.html">Adaptive</a>
                    <a href="portfolio-one.html">One Column</a>
                    <a href="portfolio-two.html">Two Columns</a>
                    <a href="portfolio-wide.html">Wide Columns</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item">
                    <i class="nav-icon fa fa-files-o"></i>
                    Pages
                </a>
                <div class="nav-sub-item">
                    <a href="page-soon.html">Soon Page</a>
                    <a href="page-error.html">Error Page</a>
                    <a href="page-profile.html">Profile Page</a>
                    <a href="page-timeline.html">Timeline Page</a>
                    <a href="page-updates.html">Updates Page</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="contact.html">
                    <i class="nav-icon fa fa-envelope"></i>
                    Contact
                </a>
            </div>
            <div class="nav-item">
                <a id="closeMenu" href="#">
                    <i class="nav-icon fa fa-times"></i>
                    Close
                </a>
            </div>
        </div>
    </div>
    <div class="perspective_container"><!--the "moving to the left" content box-->
        <div class="wrapper"><!-- wrapper needed for scroll -->
         	<div class="header-clear"><i class="fa fa-times"></i></div>
			<div class="decoration"></div>
            
            <div class="content">
                <div class="container no-bottom">  
                    <div class="one-third-responsive full-bottom">
                        <h3>Simple Buttons</h3>
                        <p>Pure CSS3 buttons made with just one line of code are awesome! Flat, minimal, and perfect!</p>
                        <a href="#" class="button button-red">Button</a>
                        <a href="#" class="button button-green">Button</a>
                        <a href="#" class="button button-blue">Button</a>
                        <a href="#" class="button button-magenta">Button</a>
                        <a href="#" class="button button-tea">Button</a>
                        <a href="#" class="button button-yellow">Button</a>
                        <a href="#" class="button button-orange">Button</a>
                        <a href="#" class="button button-light">Button</a>
                        <a href="#" class="button button-grey">Button</a>  
                        <a href="#" class="button button-dark">Button</a>  
                        <a href="#" class="button button-red">Button</a>
                        <a href="#" class="button button-green">Button</a>           
                    </div>
                    <div class="one-third-responsive full-bottom">
                        <h3>3D Buttons</h3>
                        <p>Pure CSS3 buttons made with just one line of code are awesome! Flat, minimal, and perfect!</p>
                        <a href="#" class="button-3d button-red red-3d">Button</a>
                        <a href="#" class="button-3d button-green green-3d">Button</a>
                        <a href="#" class="button-3d button-blue blue-3d">Button</a>
                        <a href="#" class="button-3d button-magenta magenta-3d">Button</a>
                        <a href="#" class="button-3d button-tea tea-3d">Button</a>
                        <a href="#" class="button-3d button-yellow yellow-3d">Button</a>
                        <a href="#" class="button-3d button-orange orange-3d">Button</a>
                        <a href="#" class="button-3d button-light light-3d">Button</a>
                        <a href="#" class="button-3d button-grey grey-3d">Button</a>    
                        <a href="#" class="button-3d button-dark dark-3d">Button</a>  
                        <a href="#" class="button-3d button-red red-3d">Button</a>
                        <a href="#" class="button-3d button-green green-3d">Button</a> 
                    </div>
                    <div class="one-third-responsive last-column full-bottom">
                        <h3>Font Awesome Buttons</h3>
                        <p>Pure CSS3 buttons made with just one line of code are awesome! Flat, minimal, and perfect!</p>
                        <a href="#" class="button button-red"><i class="fa fa-navicon"></i>Button</a>
                        <a href="#" class="button button-green"><i class="fa fa-life-saver"></i>Button</a>
                        <a href="#" class="button button-blue"><i class="fa fa-paw"></i>Button</a>
                        <a href="#" class="button button-magenta"><i class="fa fa-camera"></i>Button</a>
                        <a href="#" class="button button-tea"><i class="fa fa-cog"></i>Button</a>
                        <a href="#" class="button button-yellow"><i class="fa fa-picture-o"></i>Button</a>
                        <a href="#" class="button button-orange"><i class="fa fa-question"></i>Button</a>
                        <a href="#" class="button button-light"><i class="fa fa-exclamation"></i>Button</a>
                        <a href="#" class="button button-grey"><i class="fa fa-angle-right"></i>Button</a>         
                        <a href="#" class="button button-dark"><i class="fa fa-angle-left"></i>Button</a>  
                    </div>
                </div>
            
                <div class="decoration"></div>
                
                <div class="one-half-responsive">
                    <h3>Speach bubbles?</h3>
                    <p>
                        A nice way of showing off a conversation maybe?
                        It's absolutely simple to create them and use them!
                    </p>
                
                    <em class="speach-left-title">John Doe says:</em>
                    <p class="speach-left">This is just an awesome bubble! It's quite cute isn't it?</p>
                    
                    <div class="clear"></div>
                    
                    <em class="speach-right-title">Jane Doe replied:</em>
                    <p class="speach-right blue-bubble">Yeap! It's awesome isn't it and it's not that hard to use! And they act like bubbles, only expanding to 75% of width!</p>
                    
                    <div class="clear"></div>  
                         
                    <em class="speach-left-title">John Doe says:</em>
                    <p class="speach-left">Awesome stuff!</p> 
                    
                    <div class="clear"></div>
                    
                    <em class="speach-right-title">Jane Doe replied:</em>
                    <p class="speach-right blue-bubble">Yeap! It's awesome isn't it and it's not that hard to use! And they act like bubbles, only expanding to 75% of width!</p>
                </div> 
                
                <div class="decoration hide-if-responsive"></div>
                
                <div class="one-half-responsive last-column">
                    <h3>Speach bubbles?</h3>
                    <p>
                        A nice way of showing off a conversation maybe?
                        It's absolutely simple to create them and use them!
                    </p>
                
                    <em class="speach-left-title">John Doe says:</em>
                    <p class="speach-left">This is just an awesome bubble! It's quite cute isn't it?</p>
                    
                    <div class="clear"></div>
                    
                    <em class="speach-right-title">Jane Doe replied:</em>
                    <p class="speach-right green-bubble">Yeap! It's awesome isn't it and it's not that hard to use! And they act like bubbles, only expanding to 75% of width!</p>
                    
                    <div class="clear"></div>  
                         
                    <em class="speach-left-title">John Doe says:</em>
                    <p class="speach-left">Awesome stuff!</p> 
                    
                    <div class="clear"></div>
                    
                    <em class="speach-right-title">Jane Doe replied:</em>
                    <p class="speach-right green-bubble">Yeap! It's awesome isn't it and it's not that hard to use! And they act like bubbles, only expanding to 75% of width!</p>
                </div> 
                
                <div class="decoration"></div>
                <div class="container no-bottom">
                    <h4>Device detection</h4>
                    <p>A simple way to detect devices! When visiting from a mobile, only the one detected will appear!</p>
                    <div class="one-half-responsive">
                        <div class="android-detected">
                            <div class="detected-wrapper">
                                <img src="images/android.png" alt="img">
                                <h4>Get it on Google Play</h4>
                                <em>For your Android Device</em>
                                <p>
                                    This is a demo box, included in the template, but you can detect Androids
                                    and add whatever text or element appear for that platform only!
                                </p>
                            </div>
                        </div>
                        <div class="decoration hide-if-responsive"></div>
                        <div class="ipod-detected">
                            <div class="detected-wrapper">
                                <img src="images/appstore.png" alt="img">
                                <h4>Get it on the Appstore</h4>
                                <em>For your iPod Touch</em>
                                <p>
                                    This is a demo box, included in the template, but you can detect Androids
                                    and add whatever text or element appear for that platform only!
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="decoration hide-if-responsive"></div>
                    <div class="one-half-responsive last-column">
                        <div class="ipad-detected">
                            <div class="detected-wrapper">
                                <img src="images/appstore.png" alt="img">
                                <h4>Get it on the Appstore</h4>
                                <em>For your iPad / iPad Mini</em>
                                <p>
                                    This is a demo box, included in the template, but you can detect Androids
                                    and add whatever text or element appear for that platform only!
                                </p>
                            </div>
                        </div>
                        <div class="decoration hide-if-responsive"></div>
                        <div class="iphone-detected">
                            <div class="detected-wrapper">
                                <img src="images/appstore.png" alt="img">
                                <h4>Get it on the Appstore</h4>
                                <em>For your iPhone</em>
                                <p>
                                    This is a demo box, included in the template, but you can detect Androids
                                    and add whatever text or element appear for that platform only!
                                </p>
                            </div>
                        </div>  
                    </div>  
                    <div class="clear"></div>
                </div> 
                
                <div class="decoration"></div>
                <div class="footer-section">
                    <p class="footer-text">
                        Copyright 2014.<br>
                        All rights reserved.
                    </p>
                    <div class="footer-icons">
                        <a href="#" class="footer-facebook-icon"><i class="fa fa-facebook"></i></a>
                        <a href="#" class="footer-google-icon"><i class="fa fa-google-plus"></i></a>
                        <a href="#" class="footer-twitter-icon"><i class="fa fa-twitter"></i></a>
                        <a href="#" class="footer-up-icon"><i class="fa fa-angle-up"></i></a>
                    </div>
                </div>
        	</div><!--content-->
        </div><!-- wrapper -->
    </div><!-- /perspective container -->
</div><!-- /perspective -->
</div>
<script type="text/javascript" src="js/menu.js"></script>
</body>
</html>
